<script setup name="VerticalScrollbar">
import { computed } from "vue";
import { ref, onMounted, onBeforeUnmount } from "vue";

const currentVal = ref(0);
const inputContainer = ref(null);
const sliderWidth = ref(0);
const pressTimer = ref(null);
const emit = defineEmits(["position"]);

const props = defineProps({
	min: {
		type: Number,
		default: 0
	},
	max: {
		type: Number,
		default: 100
	},
	size: {
		type: Number,
		default: 10
	}
});

const resizeObserver = new ResizeObserver(entries => {
	resize();
});

const resize = () => {
	sliderWidth.value = inputContainer.value.clientHeight;
	// console.log("resize", sliderWidth.value);
};

const sliderStyle = computed(() => {
	let w = sliderWidth.value / (props.max - props.min + 1);
	if (w < 20) w = 20;
	return {
		width: sliderWidth.value + "px",
		"--slider-thumb-size": w + "px",
		"--slider-size": props.size + "px",
		"--trans-y": "-" + props.size + "px"
	};
});

const handleInput = e => {
	// console.log("handleInput", e.target.value);
	clearPress();
	currentVal.value = parseInt(e.target.value);
	// currentVal.value = e.target.value;
	emit("position", currentVal.value);
};

const minusValue = () => {
	clearPress();
	pressTimer.value = setInterval(() => {
		if (currentVal.value <= props.min) {
			return;
		}
		currentVal.value = currentVal.value - 1;
		emit("position", currentVal.value);
		// console.log("minusValue", currentVal.value);
	}, 100);
};

const plusValue = () => {
	clearPress();
	pressTimer.value = setInterval(() => {
		if (currentVal.value >= props.max) {
			return;
		}
		currentVal.value = currentVal.value + 1;
		emit("position", currentVal.value);
		// console.log("plusValue", currentVal.value);
	}, 100);

	// currentVal.value = currentVal.value + 1;
	// console.log("plusValue", currentVal.value);
};

const clearPress = () => {
	if (pressTimer.value) {
		clearInterval(pressTimer.value);
	}
};

const setPosition = pos => {
	currentVal.value = pos;
	// console.log("setPosition", pos);
};

defineExpose({
	setPosition,
	clearPress
});

onMounted(() => {
	resizeObserver.observe(inputContainer.value);
	// sliderWidth.value = inputContainer.value.clientHeight;
});

onBeforeUnmount(() => {
	resizeObserver.unobserve(inputContainer.value);
});
</script>
<template>
	<div class="slider-container">
		<!-- <svg-icon
			iconName="icon-sanjiaotop"
			className="slider-button"
			:size="props.size + 'px'"
			@mousedown="minusValue()"
			@mouseup="clearPress()"
		></svg-icon> -->
		<el-icon
			class="slider-button"
			:size="props.size"
			color="#808080"
			@mousedown.stop="minusValue()"
			@mouseup.stop="clearPress()"
		>
			<CaretTop />
		</el-icon>
		<div
			class="input-container"
			ref="inputContainer"
			:style="{ '--slider-size': props.size + 'px' }"
		>
			<input
				type="range"
				class="v-slider"
				:style="sliderStyle"
				step="1"
				:min="props.min"
				:max="props.max"
				v-model="currentVal"
				@input="handleInput"
			/>
		</div>

		<!-- <svg-icon
			iconName="icon-sanjiaobottom"
			className="slider-button"
			:size="props.size + 'px'"
			@mousedown="plusValue()"
			@mouseup="clearPress()"
		></svg-icon> -->
		<el-icon
			class="slider-button"
			:size="props.size"
			color="#808080"
			@mousedown.stop="plusValue()"
			@mouseup.stop="clearPress()"
		>
			<CaretBottom />
		</el-icon>
	</div>
</template>
<style lang="scss" scoped>
.slider-container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.slider-button {
	background-color: rgb(240, 240, 240);
}

.slider-button:hover {
	background-color: rgb(200, 200, 200);
}

.input-container {
	line-height: var(--slider-size);
	flex: 1;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.v-slider {
	appearance: none;
	// -webkit-appearance: none;
	// -moz-appearance: none;
	background: rgb(240, 240, 240);
	width: 100%;
	height: var(--slider-size);
	outline: none;
	transform-origin: left bottom;
	transform: translateY(var(--trans-y)) rotate(90deg);
}

.v-slider::-webkit-slider-thumb {
	appearance: none;
	// -webkit-appearance: none;
	// -moz-appearance: none;
	// width: 40px;
	width: var(--slider-thumb-size);
	height: var(--slider-size);
	background: rgb(140, 140, 140);
	border-radius: 5px;
	transition: 0.3s;
}

.v-slider::-moz-slider-thumb {
	appearance: none;
	// -webkit-appearance: none;
	// -moz-appearance: none;
	width: var(--slider-thumb-size);
	height: var(--slider-size);
	background: rgb(140, 140, 140);
	border-radius: 5px;
	transition: 0.3s;
}

.v-slider:hover::-webkit-slider-thumb {
	background: rgb(99, 99, 99);
}

.v-slider:hover::-moz-slider-thumb {
	background: rgb(99, 99, 99);
}

// .v-slider:active::-webkit-slider-thumb {
// 	background: rgb(59, 111, 178);
// }
// .v-slider:active::-moz-slider-thumb {
// 	background: rgb(59, 111, 178);
// }
</style>
